<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>北京积木纵横后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="__SKIN__/js/layui/css/layui.css" media="all">
    <!--JS引用-->
    <script src="__SKIN__/js/jquery/jquery-3.3.1.js"></script>
    <script src="__SKIN__/js/layui/xm-select.js"></script>
    <!--CSS引用-->
</head>
<body>
<body>
<div class="layui">
    <div id="addform">
        <div class="">
            <div class="layui-inline ">
                <label class="layui-form-label">流程：</label>
                <div class="layui-input-block">
                    <div id="get_flowlist" style="width:200px;"></div>
                </div>
            </div>

        </div>
        <div>
            <form id="form" style="width:90%;margin-left:5%;" class="layui-form layui-form-pane" action="">

            </form>
        </div>
    </div>
</div>
<script src="__SKIN__/workflow/js/form_assembly.js" charset="utf-8"></script>
<script src="__SKIN__/js/layui/layui.js" charset="utf-8"></script>
<script>
    var  add_config = [];
    //同步ajax请求数据转出
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(e){
                arr = eval('(' + e + ')');
            }
        });
        return arr;
    }

    layui.use(['table','form','layer','upload','element'], function(){
        var $ = layui.$
            ,table = layui.table
            ,upload = layui.upload
            ,form = layui.form;
        /*************************初始化下拉***********************/
        xmSelect.render({
            el:'#get_flowlist',
            name:'get_flowlist',
            radio: true,
            tips: '请选择流程模版',
            clickClose: true,
            // toolbar: {show: true},
            data: function(){
                let  url = "{:url('Workflowajax/get_flowlist')}";
                let  param = {};
                let  data = ajax(url,param);
                return data.data;
            },
            paging: true,
            pageSize: 5,
            filterable: true,
            on: function(data){
                //change, 此次选择变化的数据,数组
                let change = data.change;
                let isAdd = data.isAdd;
                $('#form').html('');
                if(isAdd == false){
                    add_config['flow_id']= '';
                    return false;
                }
                add_config['flow_id']= change[0].value;
                let id = change[0].value;
                let judge_url = "{:url('Workflowajax/judge_form_extend')}";
                let res =ajax(judge_url,{'flow_id':id})
                if(res.data.is_form_extend === 1){
                    active.setflow(res.data,id);
                }else{
                    get_addform(id);
                }
            },
        });

        var get_addform = function(id){
            let urls = "{:url('Workflowajax/get_formconfig')}";
            let res= ajax(urls, {'flow_id':id});
            let html = loadflow(res,'add');
            //修改外部开关到默认关闭
            form.val('example', {
                "close": false //开关状态
            });
            $('#form').html(html);
            demoListView();
            upload.render();
            form.render();
        }
        /************************************监听提交（发起流程表单）***************************/
        form.on('submit(form)', function(data){
            let add_url = "{:url('Workflowajax/save_workflow')}";
            let res = ajax(add_url,JSON.stringify(data.field));
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
            return false;
        });
        //监听指定表单源开关  true=外部   false=模板表单
        form.on('switch(switch)', function(data){
            let option = this.checked ? 'true' : 'false'
            if(option == 'true'){
                //ajax生成下拉框，选择后根据url弹出表单层
                let html = loadline('请选择外接表单');
                    html+= load_select();
                    $('#form').html('');
                    $('#form').html(html);
                xmSelect.render({
                    el:'#form_extend_list',
                    name:'form_extend_list',
                    radio: true,
                    tips: '请选择表单',
                    clickClose: true,
                    // toolbar: {show: true},
                    data: function(){
                        let  url = "{:url('Workflowajax/get_form_extend')}";
                        let  param = {};
                        let  data = ajax(url,param);
                        return data.data;
                    },
                    paging: true,
                    pageSize: 5,
                    filterable: true,
                    on: function(data){
                        let change = data.change;
                        let isAdd = data.isAdd;
                        if(isAdd == false){
                            return false;
                        }
                        let flow_id = add_config['flow_id'];
                        if(flow_id === '' || flow_id===undefined){
                            layer.msg('请先选择流程模版');
                            return  false;
                        }
                        add_config['form_url']= change[0].value;
                        //弹出外接表单页面
                        active.setflow();
                    },
                });
            }else{
                $('#form').html('');
                let id = add_config['flow_id'];
                if(id==='' || id===undefined){
                    return false;
                }
                get_addform(id);
                //这里重新请求部署模版表单
            }
        });
        var load_select = function(){
            let html = "";
                html+= '<div class="layui-input-block">';
                html+= '<div id="form_extend_list" style="width:200px;"></div>';
                html+= '</div>';
                return html;
        }
        //弹窗表单
        var active = {
            setflow:function(data,flow_id){ //配置流程模板
                    //获取参数
                let url = '../'+data.value;
                top.type=="add";
                _this = layer.open({
                    type: 2//此处以iframe举例
                    ,title: '填写外链表单'
                    ,area: 'auto'
                    ,shade: 0
                    ,maxmin: true
                    ,offset: 'auto'
                    ,content:url
                    ,btn: [ '关闭']
                    ,btn1: function(index, layero){
                        layer.close(index);
                        return false;
                    },
                    cancel: function(layero,index){
                        layer.closeAll();
                    },
                    end:function () {
                        form_extend = top.form_extend; //外接表提交后生成的id标识
                        if(form_extend=='' || form_extend==undefined){
                            layer.msg('创建失败');
                        }else{
                            //执行自动创建flow_id
                            let add_url = "{:url('Workflowajax/save_workflow')}";
                            let res = ajax(add_url,{'form_extend':form_extend,'flow_id':flow_id});
                        }
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    }
                });
                layer.full(_this); //窗口直接顶天立地
            }
        };

        //弹窗表单按钮控制器
        $('#extra .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        /************************************多文件列表示例*********************************/
        var demoListView = function(){
            let object = $('#uploads'),uploadListIns = upload.render({
                elem: '#testList'
                ,url: "{:url('Workflowajax/layui_upload')}" //改成您自己的上传接口
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));
                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        object.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code==1){ //上传成功
                        var tr = object.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(1).append('<input type="hidden" name="file_ids[]" value="'+res.data.file_id+'">');
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        //回写文件ID

                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = object.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        };

    });
    /**************************layui实例化结束*************************/

    /***************************初始化表单方法**************************/
    var loadflow = function(res,type){
        var html = '';
        html+=loadhead(res.msg,type);
        html += loadline('审核表单');
        $.each(res.data,function(f,n){

            switch (n.field_type) {
                case 1:
                    html += loadtext(n);
                    break;
                case 2:
                    html += loadselect(n);
                    break;
                case 3:
                    html += loadradio(n);
                    break;
                case 4:
                    html += loadcheckbox(n);
                    break;
            }
        });
        //判断允许更改审核结构（审核人员，角色，部门）
        if(res.downlist !== undefined)
        {
            if (res.downlist.length > 0) {
                html += loadline('附件下载');
                html += down_list();
            }
        }

        if(res.msg.is_upload==1){
            html += loadline('附件上传');
            html += uploads();
        }

        if(res.msg.is_comment==1){
            html += loadline('留言评论');
            html += conmment();
        }

        html += loadline();
        html += loadbutton(res.process,type);

        return html;
    }
</script>

</body>
</html>